.apiDocsContainer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  background: #0a0a0a;
  min-height: 100vh;
  color: #e6e6e6;

  .header {
    text-align: center;
    margin-bottom: 32px;
    
    h1 {
      color: #00ff00 !important;
      font-size: 2.5rem;
      margin-bottom: 16px;
      
      :global(.anticon) {
        margin-right: 12px;
      }
    }
    
    p {
      color: #b0b0b0;
      font-size: 16px;
      max-width: 600px;
      margin: 0 auto;
    }
  }

  .filters {
    background: #1a1a1a;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    border: 1px solid #333;
    
    :global(.ant-input) {
      background: #2a2a2a !important;
      border-color: #444 !important;
      color: #e6e6e6 !important;
      
      &:hover {
        border-color: #00ff00 !important;
      }
      
      &:focus {
        border-color: #00ff00 !important;
        box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.2) !important;
      }
    }
    
    :global(.ant-select) {
      .ant-select-selector {
        background: #2a2a2a !important;
        border-color: #444 !important;
        color: #e6e6e6 !important;
      }
      
      &:hover .ant-select-selector {
        border-color: #00ff00 !important;
      }
      
      &.ant-select-focused .ant-select-selector {
        border-color: #00ff00 !important;
        box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.2) !important;
      }
    }
    
    :global(.ant-select-dropdown) {
      background: #2a2a2a !important;
      border: 1px solid #444 !important;
      
      .ant-select-item {
        color: #e6e6e6 !important;
        
        &:hover {
          background: #333 !important;
        }
        
        &.ant-select-item-option-selected {
          background: rgba(0, 255, 0, 0.15) !important;
          color: #00ff00 !important;
        }
      }
    }
  }

  .apiList {
    :global(.ant-collapse) {
      background: transparent !important;
      border: none !important;
      
      .ant-collapse-item {
        background: #1a1a1a !important;
        border: 1px solid #333 !important;
        border-radius: 12px !important;
        margin-bottom: 16px !important;
        overflow: hidden;
        
        &:last-child {
          margin-bottom: 0 !important;
        }
        
        .ant-collapse-header {
          background: #1a1a1a !important;
          color: #e6e6e6 !important;
          border: none !important;
          padding: 16px 20px !important;
          transition: all 0.3s ease !important;
          
          &:hover {
            background: #2a2a2a !important;
          }
          
          .ant-collapse-arrow {
            color: #00ff00 !important;
          }
        }
        
        .ant-collapse-content {
          background: #141414 !important;
          border: none !important;
          
          .ant-collapse-content-box {
            padding: 0 !important;
          }
        }
      }
    }
  }

  .apiHeader {
    width: 100%;
    display: flex;
    align-items: center;
    
    .apiPath {
      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
      font-size: 14px !important;
      color: #00ff00 !important;
      background: rgba(0, 255, 0, 0.1) !important;
      padding: 2px 8px !important;
      border-radius: 4px !important;
      border: 1px solid rgba(0, 255, 0, 0.3) !important;
    }
  }

  .apiDetails {
    background: #141414 !important;
    border: none !important;
    
    .apiInfo {
      margin-bottom: 20px;
      
      h4 {
        color: #e6e6e6 !important;
        margin-bottom: 8px !important;
      }
    }
    
    :global(.ant-divider) {
      border-color: #333 !important;
      margin: 20px 0 !important;
    }
  }

  .parametersSection {
    margin-bottom: 24px;
    
    h5 {
      color: #00ff00 !important;
      margin-bottom: 12px !important;
    }
  }

  .parametersTable {
    background: #0f0f0f;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #333;
    
    .tableHeader {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 2fr;
      background: #2a2a2a;
      padding: 12px 16px;
      font-weight: 600;
      color: #00ff00;
      border-bottom: 1px solid #333;
      
      div {
        padding: 0 8px;
      }
    }
    
    .tableRow {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 2fr;
      padding: 12px 16px;
      border-bottom: 1px solid #222;
      transition: background 0.2s ease;
      
      &:hover {
        background: #1a1a1a;
      }
      
      &:last-child {
        border-bottom: none;
      }
      
      div {
        padding: 0 8px;
        display: flex;
        align-items: center;
      }
      
      .paramName {
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        color: #00ff00;
        font-weight: 500;
      }
    }
  }

  .requestBodySection,
  .responsesSection,
  .permissionsSection {
    margin-bottom: 24px;
    
    h5 {
      color: #00ff00 !important;
      margin-bottom: 12px !important;
    }
  }

  .codeBlock {
    background: #0f0f0f;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 16px;
    margin-top: 8px;
    overflow-x: auto;
    
    pre {
      margin: 0;
      color: #e6e6e6;
      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
      font-size: 13px;
      line-height: 1.5;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
  }

  .responseItem {
    margin-bottom: 16px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .responseHeader {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      
      span {
        color: #b0b0b0;
      }
    }
  }

  .noResults {
    text-align: center;
    padding: 60px 20px;
    
    h3 {
      color: #666 !important;
      margin: 16px 0 8px 0 !important;
    }
    
    span {
      color: #999 !important;
    }
  }

  // Tag样式覆盖
  :global(.ant-tag) {
    border-radius: 6px !important;
    font-size: 12px !important;
    padding: 2px 8px !important;
    margin: 2px !important;
    
    &.ant-tag-blue {
      background: rgba(24, 144, 255, 0.15) !important;
      border-color: rgba(24, 144, 255, 0.5) !important;
      color: #40a9ff !important;
    }
    
    &.ant-tag-green {
      background: rgba(82, 196, 26, 0.15) !important;
      border-color: rgba(82, 196, 26, 0.5) !important;
      color: #73d13d !important;
    }
    
    &.ant-tag-orange {
      background: rgba(250, 173, 20, 0.15) !important;
      border-color: rgba(250, 173, 20, 0.5) !important;
      color: #ffc53d !important;
    }
    
    &.ant-tag-red {
      background: rgba(255, 77, 79, 0.15) !important;
      border-color: rgba(255, 77, 79, 0.5) !important;
      color: #ff7875 !important;
    }
    
    &.ant-tag-purple {
      background: rgba(114, 46, 209, 0.15) !important;
      border-color: rgba(114, 46, 209, 0.5) !important;
      color: #b37feb !important;
    }
    
    &.ant-tag-cyan {
      background: rgba(19, 194, 194, 0.15) !important;
      border-color: rgba(19, 194, 194, 0.5) !important;
      color: #36cfc9 !important;
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    padding: 16px;
    
    .header {
      h1 {
        font-size: 2rem;
      }
    }
    
    .filters {
      padding: 16px;
      
      :global(.ant-space) {
        width: 100%;
        
        .ant-space-item {
          width: 100%;
          
          .ant-input,
          .ant-select {
            width: 100% !important;
          }
        }
      }
    }
    
    .parametersTable {
      .tableHeader,
      .tableRow {
        grid-template-columns: 1fr;
        gap: 8px;
        
        div {
          padding: 4px 8px;
          border-bottom: 1px solid #333;
          
          &:last-child {
            border-bottom: none;
          }
        }
      }
      
      .tableHeader {
        display: none; // 在移动端隐藏表头
      }
      
      .tableRow {
        div::before {
          content: attr(data-label) ': ';
          font-weight: 600;
          color: #00ff00;
          display: inline-block;
          width: 80px;
        }
      }
    }
    
    .apiHeader {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      
      .apiPath {
        word-break: break-all;
      }
    }
  }
}